<template>
  <h1 class="row-title">不同方向</h1>
  <div class="row">
    <My-Tooltip content="this is a test" placement="top" @visible-change="handle">
      <My-Button type="primary">top</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="bottom">
      <My-Button type="warning">bottom</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="left">
      <My-Button type="danger">left</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="right">
      <My-Button type="success">right</My-Button>
    </My-Tooltip>
  </div>
  <h1 class="row-title">切换触发模式</h1>
  <div class="row">
    <My-Tooltip content="this is a test" placement="top" trigger="click">
      <My-Button type="primary">top</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="bottom" trigger="click">
      <My-Button type="warning">bottom</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="left" trigger="click">
      <My-Button type="danger">left</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="right" trigger="click">
      <My-Button type="success">right</My-Button>
    </My-Tooltip>
  </div>
  <h1 class="row-title">手动触发模式</h1>
  <div class="row">
    <My-Tooltip content="this is a test" placement="right" manual ref="tooltipRef">
      <My-Button type="primary">right</My-Button>
    </My-Tooltip>
  </div>
  <div class="row">
    <My-Button @click="openHandler">打开提示框</My-Button>
    <My-Button @click="closeHandler">关闭提示框</My-Button>
  </div>
  <h1 class="row-title">延时触发</h1>
  <div class="row">
    <My-Tooltip
      content="this is a test"
      placement="top"
      :open-delay="2000"
      :close-delay="2000"
      @visible-change="handle"
    >
      <My-Button type="primary">top</My-Button>
    </My-Tooltip>
    <My-Tooltip
      content="this is a test"
      placement="bottom"
      :open-delay="2000"
      :close-delay="2000"
    >
      <My-Button type="warning">bottom</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="left" :open-delay="2000" :close-delay="2000">
      <My-Button type="danger">left</My-Button>
    </My-Tooltip>
    <My-Tooltip content="this is a test" placement="right" :open-delay="2000" :close-delay="2000">
      <My-Button type="success">right</My-Button>
    </My-Tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const tooltipRef = ref(null)
const handle = (isShow) => {
  if (isShow) console.log('提示框显示')
  else console.log('提示框隐藏')
}

const openHandler = () => {
  // 用户要手动打开
  tooltipRef.value.show()
}
const closeHandler = () => {
  // 用户要手动关闭
  tooltipRef.value.hide()
}
</script>

<style lang="scss" scoped></style>

